<template>
  <div>
    <Row>
      <i-col span="24">
        <Card>
          <p slot="title">
            <Icon type="stats-bars"></Icon>
            预约查询
          </p>
          <a href="javascript:void(0)" slot="extra">
            <Button type="primary" size="small" @click="addNewEmployee">
              <Icon type="md-add"></Icon>&nbsp;新建雇主
            </Button>
          </a>
          <div>
            <div>
              <Form inline>
                <FormItem>
                  <i-select clearable v-model="form.emName" style="width:200px" placeholder="请选择雇主">
                    <Option v-for="item in companies" :value="item.companyId" :key="item.companyId">
                      {{item.companyName}}
                    </Option>
                  </i-select>
                </FormItem>
                <FormItem>
                  <Button type="primary" @click="query(1)">查询</Button>
                </FormItem>
                <FormItem>
                  <Button @click="cancelQuery">取消</Button>
                </FormItem>
              </Form>
            </div>
            <div>
              <Table size="small" :data="data" :columns="columns"></Table>
              <div style="padding: 15px 0;text-align: right">
                <Page :total="total" :page-size="8" show-total @on-change="pageChange"/>
              </div>
            </div>
          </div>
        </Card>
      </i-col>
    </Row>
    <Modal v-model="addFlag" :title="editInfo?'编辑雇主信息':'新增雇主'" @on-ok="addEmployee">
      <div>
        <Form label-position="left" label-width="120">
          <FormItem label="雇主名称(ZH)" prop="realName">
            <i-input v-model="newForm.companyNameCn" icon="ios-person" placeholder="雇主名称(ZH)"></i-input>
          </FormItem>
          <FormItem label="雇主名称(EN)">
            <i-input v-model="newForm.companyNameEn" icon="ios-person" placeholder="雇主名称(EN)"></i-input>
          </FormItem>
        </Form>
      </div>
    </Modal>
  </div>
</template>

<script>
  export default {
    name: "schedule",
    data() {
      return {
        form: {
          emName: ''
        },
        data: [],
        columns: [
          {
            title: '雇主名称',
            key: 'companyName',
          },
          {
            title: '英文全称',
            key: 'companyNameEn',
          },
          {
            title: '操作',
            key: 'action',
            width: 200,
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.editDetail(params.row)
                    }
                  }
                }, '编辑'),
                h('Button', {
                  props: {
                    type: 'success',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.configDetail(params.row)
                    }
                  }
                }, '配置'),
                h('Button', {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.delete(params.row.companyId)
                    }
                  }
                }, '删除'),
              ])
            }
          }
        ],
        companies: [],
        total: 0,
        currentPage: 1,
        addFlag: false,
        newForm: {
          companyNameCn: '',
          companyNameEn: '',
          companyDescCn: '',
          companyDescEn: ''
        },
        editInfo: false,
        currentRow: null
      }
    },
    methods: {
      query(pageNo) {
        this.$api.searchCompany({
          companyId: this.form.emName,
          pageNo: pageNo || this.currentPage
        }).then(res => {
          if (res.code === 200) {
            this.data = res.data.data;
            this.total = res.data.total
          }
        })
      },
      cancelQuery() {
        this.form.emName = '';
        this.query()
      },
      pageChange(page) {
        this.currentPage = page;
        this.query(page)
      },
      addNewEmployee() {
        this.addFlag = true;
        this.newForm = {
          companyNameCn: '',
          companyNameEn: '',
          companyDescCn: '',
          companyDescEn: ''
        }
      },
      addEmployee() {
        if (this.editInfo) {
          this.$api.editInfo({...{companyId: this.currentRow.companyId}, ...this.newForm}).then(res => {
            if (res.code === 200) {
              this.$Notice.success({
                title: res.data.msg || '更新雇主信息成功！'
              });
              this.query(1)
            }
          })
        } else {
          this.$api.addCompany(this.newForm).then(res => {
            if (res.code === 200) {
              this.$Notice.success({
                title: res.data.msg || '新增雇主成功！'
              });
              this.query(1)
            }
          })
        }
      },
      editDetail(row) {
        this.currentRow = row;
        this.newForm = {
          companyNameCn: row.companyName,
          companyNameEn: row.companyNameEn,
          companyDescCn: row.companyDesc,
          companyDescEn: row.companyDescEn
        };
        this.editInfo = true;
        this.addFlag = true;
      },
      configDetail(row) {
        this.currentRow = row;
        this.$router.push({
          name: 'employee_Config',
          query: row
        })
      },
      delete(id) {
        this.$api.deleteCompany({
          companyId: id
        }).then(res => {
          if (res.code === 200) {
            this.$Notice.success({
              title: res.data.msg
            });
            this.query(1)
          }
        })
      },
      getCompany() {
        this.$api.getCompany().then(res => {
          if (res.code === 200) {
            this.companies = res.data.companyList
          }
        })
      }
    },
    created() {
      this.getCompany();
      this.query(1)
    }
  }
</script>

<style scoped>

</style>
